// 车辆出险率
<template>

<div class="danger-probability">
    <c-block-header :title='"出险率"'></c-block-header>

    <Table :width='tableW' :data='data' :columns='title'></Table>

    <div class="auxiliary">
         <Form :label-width='80' label-position='left' >
            <Row :gutter='20'>
                <Col :span='item.span' v-for='(item, index) of auxiliary' :key='index'>
                    <FormItem :label='item.label'>
                        <Input v-model="auxiliaryDataCache[item.key]" number :size='item.size'></Input>
                    </FormItem>
                </Col>
            </Row>        
        </Form>
    </div>
   
    
</div>

</template>

<script lang='ts'>
import {Component, Prop, Watch, Vue} from 'vue-property-decorator'
import tableFormBuilder from '@/components/ivew_components/table_form_builder/index.vue'
import parckComponent from '@/components/ivew_components/parck_components/index'
import insuranceCompany from '@/components/ivew_conf/insurance_company'


@Component({})
export default class dangerPropbability extends Vue{
    name:string = 'danger-propbability'

    @Prop()
    data:any

    @Prop()
    auxiliaryData

    @Watch('auxiliaryData')
    onAuxiliaryDataChange(newVal, oldVal){
        this.auxiliaryDataCache = newVal
    }

    auxiliaryDataCache = this.auxiliaryData

    auxiliary = [

        {
            label: '车船税',
            key: 'vehicleTax',
            span: 12,
            size: 'small'
        },
        {
            label: '纯风险保费',
            key: 'pureRiskPremiums',
            span:12,
            size: 'small'
        }
        
    ]


    mods = {

        company: {

            component: parckComponent('select'),
            conf: {
                options: insuranceCompany,
                placement: 'top'
            }
            
        },

        jq: {
            component: parckComponent('select'),
            conf: {
                size: 'small',
                placement: 'top',
                options:[
                    {
                        label: '一年无责任事故',
                        value: '一年无责任事故',
                    },
                    {
                        label: '二年无责任事故',
                        value: '二年无责任事故'
                    },
                    {
                        label: '三年无事故',
                        value: '三年无事故',
                    },
                    {
                        label: '上年发生一次有责无亡事故',
                        value: '上年发生一次有责无亡事故'
                    },
                    {
                        label: '上年发生二次或以上有责事故',
                        value: '上年发生二次或以上有责事故'
                    },
                    {
                        label: '上年发生有责任死亡事故',
                        value: '上年发生有责任死亡事故'
                    },
                    {
                        label: '无交强险',
                        value: '无交强险'
                    },
                    {
                        label: '新车',
                        value: '新车'
                    },
                   
                    
                ]
            },
            
        },
        
        sy: {
            component: parckComponent('select'),
            conf: {
                size: 'small',
                placement: 'top',
                options:[
                    {
                        label: '一年',
                        value: '一年',
                    },
                    {
                        label: '两年',
                        value: '两年',
                    },
                    {
                        label: '多年',
                        value: '多年'
                    },
                    {
                        label: '连续3年没有发生赔款',
                        value: '连续3年没有发生赔款'
                    },
                    {
                        label: '连续2年没有发生赔款',
                        value: '连续2年没有发生赔款'
                    },
                    {
                        label: '上年没有发生赔款',
                        value: '上年没有发生赔款'
                    },
                    {
                        label: '新保',
                        value: '新保'
                    },
                    {
                        label: '新车',
                        value: '新车'
                    },
                    {
                        label: '1次',
                        value: '1次'
                    },
                    {
                        label: '2次',
                        value: '2次'
                    },
                    {
                        label: '3次',
                        value: '3次'
                    },
                    {
                        label: '4次',
                        value: '4次'
                    },
                    {
                        label: '5次及以上',
                        value: '5次及以上'
                    },
                    
                    
                ]
            },
            
        },


        chuXianCiShu: {
            component: parckComponent('input'),
            conf: {}
        }
        
    }

    


    title = [

        {
            title: '险种',
            width: 80,
            key: 'label',
        },
        {
            title: '上年承保公司',
            width: 140,
            align: 'center',
            key: 'company',
            render: (h, {row, column, index}) =>{

                let vue = this;

                return h(tableFormBuilder, {props:{
                    data:vue.data,
                    index,
                    row:{
                        ...row,
                        key: column.key  
                    },
                    column,
                    mods: vue.mods
                }});

            }
        },
        {
            title: '出险概况',
            width: 220,
            align: 'center',
            key: 'chuXianGaiShu',
            render: (h, {row, column, index}) =>{

                let vue = this;
                
                return h(tableFormBuilder, {props:{
                    data:vue.data,
                    index,
                    row,
                    column,
                    mods: vue.mods
                }});

            }
        },
        {
            title: '出险次数',
            width: 90,
            align: 'center',
            key: 'chuXianCiShu',
            render: (h, {row, column, index}) =>{

                let vue = this;

                return h(tableFormBuilder, {props:{
                    data:vue.data,
                    index,
                    row:{
                        ...row,
                        key: column.key  
                    },
                    column,
                    mods: vue.mods
                }});

            }
        },
        
    ]

    // 表格宽度
   get tableW():number{
        let w = 2;

        this.title.forEach(item =>{
            w += item.width || 80;
        })

        return w;
    }

    // 提交表单数据获取方法
    created (){

        let vue = this
        
        this.$emit('dataForm', () => {

           return {
                tableData: vue.data,
                auxiliary: vue.auxiliaryDataCache,
           }
        });
    }
    
}

</script>

<style scoped lang='scss'>

.danger-probability{
     text-align: left;
}

.auxiliary{
    position: relative;
    margin-top: _rem(20px);
}


</style>